<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>RS-1200 Prototype 45 | Elements | Font Icons</title>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../layout/styles/main.css" rel="stylesheet" type="text/css" media="all">
<link href="../layout/styles/mediaqueries.css" rel="stylesheet" type="text/css" media="all">
<!--[if lt IE 9]>
<link href="../layout/styles/ie/ie8.css" rel="stylesheet" type="text/css" media="all">
<script src="../layout/scripts/ie/css3-mediaqueries.min.js"></script>
<script src="../layout/scripts/ie/html5shiv.min.js"></script>
<![endif]-->
</head>
<body class="">
<div class="wrapper row1">
  <header id="header" class="full_width clear">
    <hgroup>
      <h1><a href="../index.html">RS-1200 Prototype 45</a></h1>
      <h2>Free Responsive Template</h2>
    </hgroup>
    <div id="header-contact">
      <ul class="list none">
        <li><span class="icon-envelope"></span> <a href="#">info@domain.com</a></li>
        <li><span class="icon-phone"></span> +xx xxx xxxxxxxxxx</li>
      </ul>
    </div>
  </header>
</div>
<!-- ################################################################################################ -->
<div class="wrapper row2">
  <nav id="topnav">
    <ul class="clear">
      <li><a href="../index.html" title="Homepage">Homepage</a></li>
      <li><a class="drop" href="#" title="Pages">Pages</a>
        <ul>
          <li><a href="../pages/full-width-content.html" title="Full Width Content">Full Width Content</a></li>
          <li><a href="../pages/content-leftsidebar.html" title="Content + Left Sidebar">Content + Left Sidebar</a></li>
          <li><a href="../pages/content-rightsidebar.html" title="Content + Right Sidebar">Content + Right Sidebar</a></li>
          <li><a href="../pages/content-bothsidebars.html" title="Content + Both Sidebars">Content + Both Sidebars</a></li>
          <li><a href="../pages/contact.html" title="Contact">Contact</a></li>
          <li><a href="../pages/404.html" title="404">404</a></li>
          <li><a href="../pages/testimonials.html" title="Testimonials">Testimonials</a></li>
          <li><a href="../pages/about-us.html" title="About Us">About Us</a></li>
          <li><a href="../pages/team-member.html" title="Team Member">Team Member</a></li>
          <li class="last-child"><a href="../pages/faq.html" title="FAQ">FAQ</a></li>
        </ul>
      </li>
      <li class="active"><a class="drop" href="#" title="Elements">Elements</a>
        <ul>
          <li><a href="buttons.html" title="Buttons">Buttons</a></li>
          <li><a href="alert-messages.html" title="Alert Messages">Alert Messages</a></li>
          <li class="active"><a href="font-icons.html" title="Font Icons">Font Icons</a></li>
          <li><a href="call-to-action.html" title="Call To Action">Call To Action</a></li>
          <li><a href="columns.html" title="Columns">Columns</a></li>
          <li><a href="columns-no-gutter.html" title="Columns - No Gutter">Columns - No Gutter</a></li>
          <li><a href="lists.html" title="Lists">Lists</a></li>
          <li><a href="accordions.html" title="Accordions">Accordions</a></li>
          <li><a href="tabs.html" title="Tabs">Tabs</a></li>
          <li><a href="toggles.html" title="Toggles">Toggles</a></li>
          <li class="last-child"><a href="pricing-tables.html" title="Pricing Tables">Pricing Tables</a></li>
        </ul>
      </li>
      <li><a class="drop" href="#" title="Portfolio Layouts">Portfolio Layouts</a>
        <ul>
          <li><a href="../portfolio-layouts/portfolio-overview-full-width-content.html" title="Full Width Portfolio">Full Width Portfolio</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-2columns.html" title="2 Column Grid">2 Column Grid</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-2columns-leftsidebar.html" title="2 Column Grid + Left Sidebar">2 Col. Grid + Left Sidebar</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-2columns-rightsidebar.html" title="2 Column Grid + Right Sidebar">2 Col. Grid + Right Sidebar</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-2columns-bothsidebars.html" title="2 Column Grid + Both Sidebars">2 Col. Grid + Both Sidebars</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-3columns.html" title="3 Column Grid">3 Column Grid</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-3columns-leftsidebar.html" title="3 Column Grid + Left Sidebar">3 Col. Grid + Left Sidebar</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-3columns-rightsidebar.html" title="3 Column Grid + Right Sidebar">3 Col. Grid + Right Sidebar</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-3columns-bothsidebars.html" title="3 Column Grid + Both Sidebars">3 Col. Grid + Both Sidebars</a></li>
          <li class="last-child"><a href="../portfolio-layouts/portfolio-overview-4columns.html" title="4 Column Grid">4 Column Grid</a></li>
        </ul>
      </li>
      <li><a class="drop" href="#" title="Gallery Layouts">Gallery Layouts</a>
        <ul>
          <li><a href="../gallery-layouts/gallery-full-width-content.html" title="Full Width Gallery">Full Width Gallery</a></li>
          <li><a href="../gallery-layouts/gallery-2columns.html" title="2 Column Grid">2 Column Grid</a></li>
          <li><a href="../gallery-layouts/gallery-2columns-leftsidebar.html" title="2 Column Grid + Left Sidebar">2 Col. Grid + Left Sidebar</a></li>
          <li><a href="../gallery-layouts/gallery-2columns-rightsidebar.html" title="2 Column Grid + Right Sidebar">2 Col. Grid + Right Sidebar</a></li>
          <li><a href="../gallery-layouts/gallery-2columns-bothsidebars.html" title="2 Column Grid + Both Sidebars">2 Col. Grid + Both Sidebars</a></li>
          <li><a href="../gallery-layouts/gallery-3columns.html" title="3 Column Grid">3 Column Grid</a></li>
          <li><a href="../gallery-layouts/gallery-3columns-leftsidebar.html" title="3 Column Grid + Left Sidebar">3 Col. Grid + Left Sidebar</a></li>
          <li><a href="../gallery-layouts/gallery-3columns-rightsidebar.html" title="3 Column Grid + Right Sidebar">3 Col. Grid + Right Sidebar</a></li>
          <li><a href="../gallery-layouts/gallery-3columns-bothsidebars.html" title="3 Column Grid + Both Sidebars">3 Col. Grid + Both Sidebars</a></li>
          <li><a href="../gallery-layouts/gallery-4columns.html" title="4 Column Grid">4 Column Grid</a></li>
          <li class="last-child"><a href="../gallery-layouts/gallery-5columns.html" title="5 Column Grid">5 Column Grid</a></li>
        </ul>
      </li>
      <li><a href="#" title="Link Text">Link Text</a></li>
      <li class="last-child"><a href="#" title="A Very Long Link Text">A Very Long Link Text</a></li>
    </ul>
  </nav>
</div>
<!-- content -->
<div class="wrapper row3">
  <div id="container">
    <!-- ################################################################################################ -->
    <section class="clear">
      <h1>Font Awesome 3.0 Icons</h1>
      <p><strong>Default Example</strong>: <span class="icon-desktop"></span> <code>&lt;span class=&quot;icon-desktop&quot;&gt;&lt;/span&gt;</code></p>
      <div class="one_quarter first">
        <p><strong>Large Example</strong></p>
        <span class="icon-desktop icon-large"></span> <code class="code">&lt;span class=&quot;icon-desktop icon-large&quot;&gt;&lt;/span&gt;</code></div>
      <div class="one_quarter">
        <p><strong>&times;2 Example</strong></p>
        <span class="icon-desktop icon-2x"></span> <code class="code">&lt;span class=&quot;icon-desktop icon-2x&quot;&gt;&lt;/span&gt;</code></div>
      <div class="one_quarter">
        <p><strong>&times;3 Example</strong></p>
        <span class="icon-desktop icon-3x"></span> <code class="code">&lt;span class=&quot;icon-desktop icon-3x&quot;&gt;&lt;/span&gt;</code></div>
      <div class="one_quarter">
        <p><strong>&times;4 Example</strong></p>
        <span class="icon-desktop icon-4x"></span> <code class="code">&lt;span class=&quot;icon-desktop icon-4x&quot;&gt;&lt;/span&gt;</code></div>
      <p class="clear">For further information, including integration and use, take a look at the <a target="_blank" rel="nofollow" href="http://fortawesome.github.com/Font-Awesome/#examples">Font Awesome Homepage <span class="icon-arrow-right icon-large"></span></a></p>
    </section>
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <section class="clear">
      <h2>New Icons in 3.0</h2>
      <div class="one_quarter first">
        <ul class="list none">
          <li><span class="icon-cloud-download icon-large"></span> icon-cloud-download</li>
          <li><span class="icon-cloud-upload icon-large"></span> icon-cloud-upload</li>
          <li><span class="icon-lightbulb icon-large"></span> icon-lightbulb</li>
          <li><span class="icon-exchange icon-large"></span> icon-exchange</li>
          <li><span class="icon-bell-alt icon-large"></span> icon-bell-alt</li>
          <li><span class="icon-file-alt icon-large"></span> icon-file-alt</li>
          <li><span class="icon-beer icon-large"></span> icon-beer</li>
          <li><span class="icon-coffee icon-large"></span> icon-coffee</li>
          <li><span class="icon-food icon-large"></span> icon-food</li>
          <li><span class="icon-fighter-jet icon-large"></span> icon-fighter-jet</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-user-md icon-large"></span> icon-user-md</li>
          <li><span class="icon-stethoscope icon-large"></span> icon-stethoscope</li>
          <li><span class="icon-suitcase icon-large"></span> icon-suitcase</li>
          <li><span class="icon-building icon-large"></span> icon-building</li>
          <li><span class="icon-hospital icon-large"></span> icon-hospital</li>
          <li><span class="icon-ambulance icon-large"></span> icon-ambulance</li>
          <li><span class="icon-medkit icon-large"></span> icon-medkit</li>
          <li><span class="icon-h-sign icon-large"></span> icon-h-sign</li>
          <li><span class="icon-plus-sign-alt icon-large"></span> icon-plus-sign-alt</li>
          <li><span class="icon-spinner icon-spin  icon-large"></span> icon-spinner</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-angle-left icon-large"></span> icon-angle-left</li>
          <li><span class="icon-angle-right icon-large"></span> icon-angle-right</li>
          <li><span class="icon-angle-up icon-large"></span> icon-angle-up</li>
          <li><span class="icon-angle-down icon-large"></span> icon-angle-down</li>
          <li style="font-size:13px;"><span class="icon-double-angle-left icon-large"></span> icon-double-angle-left</li>
          <li style="font-size:12px;"><span class="icon-double-angle-right icon-large"></span> icon-double-angle-right</li>
          <li><span class="icon-double-angle-up icon-large"></span> icon-double-angle-up</li>
          <li style="font-size:11px;"><span class="icon-double-angle-down icon-large"></span> icon-double-angle-down</li>
          <li><span class="icon-circle-blank icon-large"></span> icon-circle-blank</li>
          <li><span class="icon-circle icon-large"></span> icon-circle</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-desktop icon-large"></span> icon-desktop</li>
          <li><span class="icon-laptop icon-large"></span> icon-laptop</li>
          <li><span class="icon-tablet icon-large"></span> icon-tablet</li>
          <li><span class="icon-mobile-phone icon-large"></span> icon-mobile-phone</li>
          <li><span class="icon-quote-left icon-large"></span> icon-quote-left</li>
          <li><span class="icon-quote-right icon-large"></span> icon-quote-right</li>
          <li><span class="icon-reply icon-large"></span> icon-reply</li>
          <li><span class="icon-github-alt icon-large"></span> icon-github-alt</li>
          <li><span class="icon-folder-close-alt icon-large"></span> icon-folder-close-alt</li>
          <li><span class="icon-folder-open-alt icon-large"></span> icon-folder-open-alt</li>
        </ul>
      </div>
    </section>
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <section class="clear">
      <h2>Web Application Icons</h2>
      <div class="one_quarter first">
        <ul class="list none">
          <li><em class="icon-adjust"></em> icon-adjust</li>
          <li><em class="icon-asterisk"></em> icon-asterisk</li>
          <li><em class="icon-ban-circle"></em> icon-ban-circle</li>
          <li><em class="icon-bar-chart"></em> icon-bar-chart</li>
          <li><em class="icon-barcode"></em> icon-barcode</li>
          <li><em class="icon-beaker"></em> icon-beaker</li>
          <li><em class="icon-bell"></em> icon-bell</li>
          <li><em class="icon-bolt"></em> icon-bolt</li>
          <li><em class="icon-book"></em> icon-book</li>
          <li><em class="icon-bookmark"></em> icon-bookmark</li>
          <li><em class="icon-bookmark-empty"></em> icon-bookmark-empty</li>
          <li><em class="icon-briefcase"></em> icon-briefcase</li>
          <li><em class="icon-bullhorn"></em> icon-bullhorn</li>
          <li><em class="icon-calendar"></em> icon-calendar</li>
          <li><em class="icon-camera"></em> icon-camera</li>
          <li><em class="icon-camera-retro"></em> icon-camera-retro</li>
          <li><em class="icon-certificate"></em> icon-certificate</li>
          <li><em class="icon-check"></em> icon-check</li>
          <li><em class="icon-check-empty"></em> icon-check-empty</li>
          <li><em class="icon-cloud"></em> icon-cloud</li>
          <li><em class="icon-cog"></em> icon-cog</li>
          <li><em class="icon-cogs"></em> icon-cogs</li>
          <li><em class="icon-comment"></em> icon-comment</li>
          <li><em class="icon-comment-alt"></em> icon-comment-alt</li>
          <li><em class="icon-comments"></em> icon-comments</li>
          <li><em class="icon-comments-alt"></em> icon-comments-alt</li>
          <li><em class="icon-credit-card"></em> icon-credit-card</li>
          <li><em class="icon-dashboard"></em> icon-dashboard</li>
          <li><em class="icon-download"></em> icon-download</li>
          <li><em class="icon-download-alt"></em> icon-download-alt</li>
          <li><em class="icon-edit"></em> icon-edit</li>
          <li><em class="icon-envelope"></em> icon-envelope</li>
          <li><em class="icon-envelope-alt"></em> icon-envelope-alt</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-exclamation-sign icon-large"></span> icon-exclamation-sign</li>
          <li><span class="icon-external-link icon-large"></span> icon-external-link</li>
          <li><span class="icon-eye-close icon-large"></span> icon-eye-close</li>
          <li><span class="icon-eye-open icon-large"></span> icon-eye-open</li>
          <li><span class="icon-facetime-video icon-large"></span> icon-facetime-video</li>
          <li><span class="icon-film icon-large"></span> icon-film</li>
          <li><span class="icon-filter icon-large"></span> icon-filter</li>
          <li><span class="icon-fire icon-large"></span> icon-fire</li>
          <li><span class="icon-flag icon-large"></span> icon-flag</li>
          <li><span class="icon-folder-close icon-large"></span> icon-folder-close</li>
          <li><span class="icon-folder-open icon-large"></span> icon-folder-open</li>
          <li><span class="icon-gift icon-large"></span> icon-gift</li>
          <li><span class="icon-glass icon-large"></span> icon-glass</li>
          <li><span class="icon-globe icon-large"></span> icon-globe</li>
          <li><span class="icon-group icon-large"></span> icon-group</li>
          <li><span class="icon-hdd icon-large"></span> icon-hdd</li>
          <li><span class="icon-headphones icon-large"></span> icon-headphones</li>
          <li><span class="icon-heart icon-large"></span> icon-heart</li>
          <li><span class="icon-heart-empty icon-large"></span> icon-heart-empty</li>
          <li><span class="icon-home icon-large"></span> icon-home</li>
          <li><span class="icon-inbox icon-large"></span> icon-inbox</li>
          <li><span class="icon-info-sign icon-large"></span> icon-info-sign</li>
          <li><span class="icon-key icon-large"></span> icon-key</li>
          <li><span class="icon-leaf icon-large"></span> icon-leaf</li>
          <li><span class="icon-legal icon-large"></span> icon-legal</li>
          <li><span class="icon-lemon icon-large"></span> icon-lemon</li>
          <li><span class="icon-lock icon-large"></span> icon-lock</li>
          <li><span class="icon-unlock icon-large"></span> icon-unlock</li>
          <li><span class="icon-magic icon-large"></span> icon-magic</li>
          <li><span class="icon-magnet icon-large"></span> icon-magnet</li>
          <li><span class="icon-map-marker icon-large"></span> icon-map-marker</li>
          <li><span class="icon-minus icon-large"></span> icon-minus</li>
          <li><span class="icon-minus-sign icon-large"></span> icon-minus-sign</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-money icon-large"></span> icon-money</li>
          <li><span class="icon-move icon-large"></span> icon-move</li>
          <li><span class="icon-music icon-large"></span> icon-music</li>
          <li><span class="icon-off icon-large"></span> icon-off</li>
          <li><span class="icon-ok icon-large"></span> icon-ok</li>
          <li><span class="icon-ok-circle icon-large"></span> icon-ok-circle</li>
          <li><span class="icon-ok-sign icon-large"></span> icon-ok-sign</li>
          <li><span class="icon-pencil icon-large"></span> icon-pencil</li>
          <li><span class="icon-picture icon-large"></span> icon-picture</li>
          <li><span class="icon-plane icon-large"></span> icon-plane</li>
          <li><span class="icon-plus icon-large"></span> icon-plus</li>
          <li><span class="icon-plus-sign icon-large"></span> icon-plus-sign</li>
          <li><span class="icon-print icon-large"></span> icon-print</li>
          <li><span class="icon-pushpin icon-large"></span> icon-pushpin</li>
          <li><span class="icon-qrcode icon-large"></span> icon-qrcode</li>
          <li><span class="icon-question-sign icon-large"></span> icon-question-sign</li>
          <li><span class="icon-random icon-large"></span> icon-random</li>
          <li><span class="icon-refresh icon-large"></span> icon-refresh</li>
          <li><span class="icon-remove icon-large"></span> icon-remove</li>
          <li><span class="icon-remove-circle icon-large"></span> icon-remove-circle</li>
          <li><span class="icon-remove-sign icon-large"></span> icon-remove-sign</li>
          <li><span class="icon-reorder icon-large"></span> icon-reorder</li>
          <li><span class="icon-resize-horizontal icon-large"></span> icon-resize-horizontal</li>
          <li><span class="icon-resize-vertical icon-large"></span> icon-resize-vertical</li>
          <li><span class="icon-retweet icon-large"></span> icon-retweet</li>
          <li><span class="icon-road icon-large"></span> icon-road</li>
          <li><span class="icon-rss icon-large"></span> icon-rss</li>
          <li><span class="icon-screenshot icon-large"></span> icon-screenshot</li>
          <li><span class="icon-search icon-large"></span> icon-search</li>
          <li><span class="icon-share icon-large"></span> icon-share</li>
          <li><span class="icon-share-alt icon-large"></span> icon-share-alt</li>
          <li><span class="icon-shopping-cart icon-large"></span> icon-shopping-cart</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-signal icon-large"></span> icon-signal</li>
          <li><span class="icon-signin icon-large"></span> icon-signin</li>
          <li><span class="icon-signout icon-large"></span> icon-signout</li>
          <li><span class="icon-sitemap icon-large"></span> icon-sitemap</li>
          <li><span class="icon-sort icon-large"></span> icon-sort</li>
          <li><span class="icon-sort-down icon-large"></span> icon-sort-down</li>
          <li><span class="icon-sort-up icon-large"></span> icon-sort-up</li>
          <li><span class="icon-star icon-large"></span> icon-star</li>
          <li><span class="icon-star-empty icon-large"></span> icon-star-empty</li>
          <li><span class="icon-star-half icon-large"></span> icon-star-half</li>
          <li><span class="icon-tag icon-large"></span> icon-tag</li>
          <li><span class="icon-tags icon-large"></span> icon-tags</li>
          <li><span class="icon-tasks icon-large"></span> icon-tasks</li>
          <li><span class="icon-thumbs-down icon-large"></span> icon-thumbs-down</li>
          <li><span class="icon-thumbs-up icon-large"></span> icon-thumbs-up</li>
          <li><span class="icon-time icon-large"></span> icon-time</li>
          <li><span class="icon-tint icon-large"></span> icon-tint</li>
          <li><span class="icon-trash icon-large"></span> icon-trash</li>
          <li><span class="icon-trophy icon-large"></span> icon-trophy</li>
          <li><span class="icon-truck icon-large"></span> icon-truck</li>
          <li><span class="icon-umbrella icon-large"></span> icon-umbrella</li>
          <li><span class="icon-upload icon-large"></span> icon-upload</li>
          <li><span class="icon-upload-alt icon-large"></span> icon-upload-alt</li>
          <li><span class="icon-user icon-large"></span> icon-user</li>
          <li><span class="icon-user-md icon-large"></span> icon-user-md</li>
          <li><span class="icon-volume-off icon-large"></span> icon-volume-off</li>
          <li><span class="icon-volume-down icon-large"></span> icon-volume-down</li>
          <li><span class="icon-volume-up icon-large"></span> icon-volume-up</li>
          <li><span class="icon-warning-sign icon-large"></span> icon-warning-sign</li>
          <li><span class="icon-wrench icon-large"></span> icon-wrench</li>
          <li><span class="icon-zoom-in icon-large"></span> icon-zoom-in</li>
          <li><span class="icon-zoom-out icon-large"></span> icon-zoom-out</li>
        </ul>
      </div>
    </section>
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <section class="clear">
      <h2>Text Editor Icons</h2>
      <div class="one_quarter first">
        <ul class="list none">
          <li><span class="icon-file icon-large"></span> icon-file</li>
          <li><span class="icon-cut icon-large"></span> icon-cut</li>
          <li><span class="icon-copy icon-large"></span> icon-copy</li>
          <li><span class="icon-paste icon-large"></span> icon-paste</li>
          <li><span class="icon-save icon-large"></span> icon-save</li>
          <li><span class="icon-undo icon-large"></span> icon-undo</li>
          <li><span class="icon-repeat icon-large"></span> icon-repeat</li>
          <li><span class="icon-paper-clip icon-large"></span> icon-paper-clip</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-text-height icon-large"></span> icon-text-height</li>
          <li><span class="icon-text-width icon-large"></span> icon-text-width</li>
          <li><span class="icon-align-left icon-large"></span> icon-align-left</li>
          <li><span class="icon-align-center icon-large"></span> icon-align-center</li>
          <li><span class="icon-align-right icon-large"></span> icon-align-right</li>
          <li><span class="icon-align-justify icon-large"></span> icon-align-justify</li>
          <li><span class="icon-indent-left icon-large"></span> icon-indent-left</li>
          <li><span class="icon-indent-right icon-large"></span> icon-indent-right</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-font icon-large"></span> icon-font</li>
          <li><span class="icon-bold icon-large"></span> icon-bold</li>
          <li><span class="icon-italic icon-large"></span> icon-italic</li>
          <li><span class="icon-strikethrough icon-large"></span> icon-strikethrough</li>
          <li><span class="icon-underline icon-large"></span> icon-underline</li>
          <li><span class="icon-link icon-large"></span> icon-link</li>
          <li><span class="icon-columns icon-large"></span> icon-columns</li>
          <li><span class="icon-table icon-large"></span> icon-table</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-th-large icon-large"></span> icon-th-large</li>
          <li><span class="icon-th icon-large"></span> icon-th</li>
          <li><span class="icon-th-list icon-large"></span> icon-th-list</li>
          <li><span class="icon-list icon-large"></span> icon-list</li>
          <li><span class="icon-list-ol icon-large"></span> icon-list-ol</li>
          <li><span class="icon-list-ul icon-large"></span> icon-list-ul</li>
          <li><span class="icon-list-alt icon-large"></span> icon-list-alt</li>
        </ul>
      </div>
    </section>
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <section class="clear">
      <h2>Directional Icons</h2>
      <div class="one_quarter first">
        <ul class="list none">
          <li><span class="icon-arrow-down icon-large"></span> icon-arrow-down</li>
          <li><span class="icon-arrow-left icon-large"></span> icon-arrow-left</li>
          <li><span class="icon-arrow-right icon-large"></span> icon-arrow-right</li>
          <li><span class="icon-arrow-up icon-large"></span> icon-arrow-up</li>
          <li><span class="icon-chevron-down icon-large"></span> icon-chevron-down</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li style="font-size: 12px;"><span class="icon-circle-arrow-down icon-large"></span> icon-circle-arrow-down</li>
          <li><span class="icon-circle-arrow-left icon-large"></span> icon-circle-arrow-left</li>
          <li style="font-size: 13px;"><span class="icon-circle-arrow-right icon-large"></span> icon-circle-arrow-right</li>
          <li><span class="icon-circle-arrow-up icon-large"></span> icon-circle-arrow-up</li>
          <li><span class="icon-chevron-left icon-large"></span> icon-chevron-left</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-caret-down icon-large"></span> icon-caret-down</li>
          <li><span class="icon-caret-left icon-large"></span> icon-caret-left</li>
          <li><span class="icon-caret-right icon-large"></span> icon-caret-right</li>
          <li><span class="icon-caret-up icon-large"></span> icon-caret-up</li>
          <li><span class="icon-chevron-right icon-large"></span> icon-chevron-right</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-hand-down icon-large"></span> icon-hand-down</li>
          <li><span class="icon-hand-left icon-large"></span> icon-hand-left</li>
          <li><span class="icon-hand-right icon-large"></span> icon-hand-right</li>
          <li><span class="icon-hand-up icon-large"></span> icon-hand-up</li>
          <li><span class="icon-chevron-up icon-large"></span> icon-chevron-up</li>
        </ul>
      </div>
    </section>
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <section class="clear">
      <h2>Video Player Icons</h2>
      <div class="one_quarter first">
        <ul class="list none">
          <li><span class="icon-play-circle icon-large"></span> icon-play-circle</li>
          <li><span class="icon-play icon-large"></span> icon-play</li>
          <li><span class="icon-pause icon-large"></span> icon-pause</li>
          <li><span class="icon-stop icon-large"></span> icon-stop</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-step-backward icon-large"></span> icon-step-backward</li>
          <li><span class="icon-fast-backward icon-large"></span> icon-fast-backward</li>
          <li><span class="icon-backward icon-large"></span> icon-backward</li>
          <li><span class="icon-forward icon-large"></span> icon-forward</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-fast-forward icon-large"></span> icon-fast-forward</li>
          <li><span class="icon-step-forward icon-large"></span> icon-step-forward</li>
          <li><span class="icon-eject icon-large"></span> icon-eject</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-fullscreen icon-large"></span> icon-fullscreen</li>
          <li><span class="icon-resize-full icon-large"></span> icon-resize-full</li>
          <li><span class="icon-resize-small icon-large"></span> icon-resize-small</li>
        </ul>
      </div>
    </section>
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <section class="clear">
      <h2>Social Icons</h2>
      <div class="one_quarter first">
        <ul class="list none">
          <li><span class="icon-phone icon-large"></span> icon-phone</li>
          <li><span class="icon-phone-sign icon-large"></span> icon-phone-sign</li>
          <li><span class="icon-facebook icon-large"></span> icon-facebook</li>
          <li><span class="icon-facebook-sign icon-large"></span> icon-facebook-sign</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-twitter icon-large"></span> icon-twitter</li>
          <li><span class="icon-twitter-sign icon-large"></span> icon-twitter-sign</li>
          <li><span class="icon-github icon-large"></span> icon-github</li>
          <li><span class="icon-github-sign icon-large"></span> icon-github-sign</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-linkedin icon-large"></span> icon-linkedin</li>
          <li><span class="icon-linkedin-sign icon-large"></span> icon-linkedin-sign</li>
          <li><span class="icon-pinterest icon-large"></span> icon-pinterest</li>
          <li><span class="icon-pinterest-sign icon-large"></span> icon-pinterest-sign</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-google-plus icon-large"></span> icon-google-plus</li>
          <li><span class="icon-google-plus-sign icon-large"></span> icon-google-plus-sign</li>
          <li><span class="icon-sign-blank icon-large"></span> icon-sign-blank</li>
        </ul>
      </div>
    </section>
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <!-- ################################################################################################ -->
    <section class="last clear">
      <h2>Medical Icons</h2>
      <div class="one_quarter first">
        <ul class="list none">
          <li><span class="icon-ambulance icon-large"></span> icon-ambulance</li>
          <li><span class="icon-beaker icon-large"></span> icon-beaker</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-h-sign icon-large"></span> icon-h-sign</li>
          <li><span class="icon-hospital icon-large"></span> icon-hospital</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-medkit icon-large"></span> icon-medkit</li>
          <li><span class="icon-plus-sign-alt icon-large"></span> icon-plus-sign-alt</li>
        </ul>
      </div>
      <div class="one_quarter">
        <ul class="list none">
          <li><span class="icon-stethoscope icon-large"></span> icon-stethoscope</li>
          <li><span class="icon-user-md icon-large"></span> icon-user-md</li>
        </ul>
      </div>
    </section>
    <!-- ################################################################################################ -->
    <div class="clear"></div>
  </div>
</div>
<!-- Footer -->
<div class="wrapper row2">
  <div id="footer" class="clear">
    <div class="one_quarter first">
      <h2 class="footer_title">Footer Navigation</h2>
      <nav class="footer_nav">
        <ul class="nospace">
          <li><a href="#">Home Page</a></li>
          <li><a href="#">Our Services</a></li>
          <li><a href="#">Meet the Team</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Online Shop</a></li>
        </ul>
      </nav>
    </div>
    <div class="one_quarter">
      <h2 class="footer_title">Latest Gallery</h2>
      <ul id="ft_gallery" class="nospace spacing clear">
        <li class="one_third first"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third first"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third first"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
      </ul>
    </div>
    <div class="one_quarter">
      <h2 class="footer_title">From Twitter</h2>
      <div class="tweet-container">
        <ul class="list none">
          <li><strong>@<a href="#">name</a></strong> <span class="tweet_text">RT <span class="at">@</span><a href="#">name</a> Donec suscipit vehicula turpis sed lutpat Quisque vitae quam neque.</span> <span class="tweet_time"><a href="#">about 9 hours ago</a></span></li>
          <li><strong>@<a href="#">name</a></strong> <span class="tweet_text">RT <span class="at">@</span><a href="#">name</a> Donec suscipit vehicula turpis sed lutpat Quisque vitae quam neque.</span> <span class="tweet_time"><a href="#">about 9 hours ago</a></span></li>
          <li><strong>@<a href="#">name</a></strong> <span class="tweet_text">RT <span class="at">@</span><a href="#">name</a> Donec suscipit vehicula turpis sed lutpat Quisque vitae quam neque.</span> <span class="tweet_time"><a href="#">about 9 hours ago</a></span></li>
          <li><strong>@<a href="#">name</a></strong> <span class="tweet_text">RT <span class="at">@</span><a href="#">name</a> Donec suscipit vehicula turpis sed lutpat Quisque vitae quam neque.</span> <span class="tweet_time"><a href="#">about 9 hours ago</a></span></li>
        </ul>
      </div>
    </div>
    <div class="one_quarter">
      <h2 class="footer_title">Contact Us</h2>
      <form class="rnd5" action="#" method="post">
        <div class="form-input clear">
          <label for="ft_author">Name <span class="required">*</span><br>
            <input type="text" name="ft_author" id="ft_author" value="" size="22">
          </label>
          <label for="ft_email">Email <span class="required">*</span><br>
            <input type="text" name="ft_email" id="ft_email" value="" size="22">
          </label>
        </div>
        <div class="form-message">
          <textarea name="ft_message" id="ft_message" cols="25" rows="10"></textarea>
        </div>
        <p>
          <input type="submit" value="Submit" class="button small orange">
          &nbsp;
          <input type="reset" value="Reset" class="button small grey">
        </p>
      </form>
    </div>
  </div>
</div>
<div class="wrapper row4">
  <div id="copyright" class="clear">
    <p class="fl_left">Copyright &copy; 2013 - All Rights Reserved - <a href="#">Domain Name</a></p>
    <p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
  </div>
</div>
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script>window.jQuery || document.write('<script src="../layout/scripts/jquery-latest.min.js"><\/script>\
<script src="../layout/scripts/jquery-ui.min.js"><\/script>')</script>
<script>jQuery(document).ready(function($){ $('img').removeAttr('width height'); });</script>
<script src="../layout/scripts/jquery-mobilemenu.min.js"></script>
<script src="../layout/scripts/custom.js"></script>
</body>
</html>